<template>
  <el-row :gutter="20" :style="{ marginTop: showWorkTab ? '0' : '10px' }" class="card-list">
    <el-col v-for="(item, index) in dataList" :key="index" :span="4.8">
      <div class="card art-custom-card">
        <span class="des subtitle">{{ item.des }}</span>
        <CountTo class="number box-title" :endVal="item.num" :duration="1000" separator=""></CountTo>
        <i class="iconfont-sys" v-html="item.icon"></i>
      </div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useSettingStore } from '@/store/modules/setting'
import { CountTo } from 'vue3-count-to'

const { showWorkTab } = storeToRefs(useSettingStore())

interface Item {
  des: string;
  icon: string;
  duration: number;
  num: number;
}
const props = defineProps({
  topData: {
    type: Object,
    default: () => ({})
  }
})

const dataList = ([
  {
    des: '今日新增（人）',
    icon: '&#xe724;',
    duration: 1000,
    num: props.topData.dayAdd ? Number(props.topData.dayAdd) : 0
  },
  {
    des: '七日新增（人）',
    icon: '&#xe7aa;',
    duration: 1000,
    num: props.topData.weekAdd ? Number(props.topData.weekAdd) : 0
  },
  {
    des: '本月新增（人）',
    icon: '&#xe82a;',
    duration: 1000,
    num: props.topData.monthAdd ? Number(props.topData.monthAdd) : 0
  },
  {
    des: '上月新增（人）',
    icon: '&#xe82a;',
    duration: 1000,
    num: props.topData.upMonthAdd ? Number(props.topData.upMonthAdd) : 0
  },
  {
    des: '用户总数（人）',
    icon: '&#xe721;',
    duration: 1000,
    num: props.topData.memberCount ? Number(props.topData.memberCount) : 0
  }
]);
</script>

<style lang="scss" scoped>
@use '@styles/variables.scss' as *;

.console {
  --card-spacing: 20px;

  // 卡片头部
  :deep(.card-header) {
    display: flex;
    justify-content: space-between;
    padding: 20px 25px 5px 0;

    .title {
      h4 {
        font-size: 18px;
        font-weight: 500;
        color: var(--art-gray-900) !important;
      }

      p {
        margin-top: 3px;
        font-size: 13px;
        color: var(--art-gray-600) !important;

        span {
          margin-left: 10px;
          color: #52c41a;
        }
      }
    }
  }

  // 设置卡片背景色、圆角、间隙
  :deep(.card-list .card),
  .card {
    margin-bottom: var(--card-spacing);
    background: var(--art-main-bg-color);
    border-radius: calc(var(--custom-radius) + 4px) !important;
  }

  @media screen and (max-width: $device-phone) {
    --card-spacing: 15px;
  }
}

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;

  .el-col {
    flex: 1;
    min-width: 0; // 防止内容溢出
  }

  .card {
    width: 100%;
    height: 100%;
  }

  .art-custom-card {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 140px;
    padding: 0 18px;
    list-style: none;
    transition: all 0.3s ease;

    $icon-size: 52px;

    .iconfont-sys {
      position: absolute;
      top: 0;
      right: 20px;
      bottom: 0;
      width: $icon-size;
      height: $icon-size;
      margin: auto;
      overflow: hidden;
      font-size: 22px;
      line-height: $icon-size;
      color: var(--el-color-primary) !important;
      text-align: center;
      background-color: var(--el-color-primary-light-9);
      border-radius: 12px;
    }

    .des {
      display: block;
      height: 14px;
      font-size: 14px;
      line-height: 14px;
    }

    .number {
      display: block;
      margin-top: 30px;
      font-size: 28px;
      font-weight: 400;
    }

    .change-box {
      display: flex;
      align-items: center;
      margin-top: 10px;

      .change-text {
        display: block;
        font-size: 13px;
        color: var(--art-text-gray-600);
      }

      .change {
        display: block;
        margin-left: 5px;
        font-size: 13px;
        font-weight: bold;

        &.text-success {
          color: var(--el-color-success);
        }

        &.text-danger {
          color: var(--el-color-danger);
        }
      }
    }
  }
}

.dark {
  .card-list {
    .art-custom-card {
      .iconfont-sys {
        background-color: #232323 !important;
      }
    }
  }
}
</style>
